<template>
	<view style="position: relative;">
		<tt-bar leftIcon="icon-back" title="我的福利" bgColor="#fed407" titleAlign="left"></tt-bar>
		<view class="content">
			<view class="oldlist" v-for="(item,index) in oldlist" :key="index" v-if="oldlist.length>0">
				<view class="oldtop">
					<view class="oldtopleft">
						<text class="iconfont icon-shoucangdianjia"></text>
						<text class="" style="font-size: 26rpx;font-weight: 900;color: #000000;margin-left: 10rpx;">{{item.storeName}}</text>
					</view>
					<view class="oldtopright">
						<text style="font-size: 24rpx;color: #ccc;">{{dis}}</text>
					</view>
				</view>
				<view class="oldbottom">
					<text class="zhong" v-if="item.status==1 || item.status==2">老学员福利</text>
					<text class="shi" v-if="item.status==3">老学员福利</text>
					<button type="default" v-if="item.status==1 || item.status==2" class="oldbtn"  @tap="oldnewxiangxiangqing(item.storeId,item.type,item.id)">使用</button>
					<!-- <button type="default" class="oldbtn" v-if="item.status==2" @tap="oldnewxiangxiangqing(item.storeId,item.type,item.id)">已使用</button> -->
					<view class="shixiao"v-if="item.status==3">
						<image src="../static/shixiao.png" mode=""></image>
					</view>
					<view class="contentold">
						<view class="imgbox">
							<image :src="'http://cdn.peixun.de123.com'+item.img" mode=""></image>
						</view>
						<view class="wenziold">
							<view class="title">
								<text>{{item.actName}}</text>
							</view>
							<view class="nav">
								<text>{{item.friendGetNumber}}位好友已领取  </text>
							</view>
							<view class="nav">
								<text>{{item.friendUse}}位好友已使用</text>
							</view>
							<view class="nav">
								<text>{{item.verifyNumber}}张福利卡已核销</text>
							</view>
							<view class="nav">
								<text v-if="item.actLoseTimeType==1">永久有效</text>
								<text v-else>有效期截至：{{item.actLoseTime}}</text>
							</view>
						</view>
					</view>
				</view>								
			</view>

			<view class="oldlist" v-for="(item,index) in newlist" :key="index" v-if="newlist.length>0">
				<view class="oldtop">
					<view class="oldtopleft">
						<text class="iconfont icon-shoucangdianjia"></text>
						<text class="" style="font-size: 26rpx;font-weight: 900;color: #000000;margin-left: 10rpx;">{{item.storeName}}</text>
					</view>
					<view class="oldtopright">
						<text style="font-size: 24rpx;color: #ccc;">{{dis2}}</text>
					</view>
				</view>
				<view class="oldbottom">					
					<text class="xin" v-if="item.status==1 || item.status==2">新学员福利</text>
					<text class="shi" v-if="item.status==3">新学员福利</text>
					<button v-if="item.status==1 || item.status==2" type="default" class="oldbtn"  @tap="oldnewxiangxiangqing(item.storeId,item.type,item.id)">使用</button>
					<!-- <button type="default" class="oldbtn" v-if="item.status==2" @tap="oldnewxiangxiangqing(item.storeId,item.type,item.id)">已使用</button> -->
					<view class="shixiao"v-if="item.status==3">
						<image src="../static/shixiao.png" mode=""></image>
					</view>
					<view class="contentold">
						<view class="imgbox">
							<image :src="'http://cdn.peixun.de123.com'+item.img" mode=""></image>
						</view>
						<view class="wenziold">
							<view class="title">
								<text>{{item.actName}}</text>
							</view>
							<view class="nav">
								<text>{{item.nickName}}赠 </text>
							</view>
							<view class="nav">
								<text v-if="item.actLoseTimeType==2">有效期截至：{{item.actLoseTime}}</text>
								<text v-if="item.actLoseTimeType==1">永久有效</text>
							</view>
							
						</view>
					</view>
				</view>
				
				
			</view>
			

		</view>
		<view class="dtItem hexiao" @tap="oldnewguize">
			<text class="lishi">老带新福利卡使用规则</text>
			<text class="iconfont icon-right"></text>
		</view>
	</view>
</template>

<script>
	import COMM from '@/common/common.js';
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed: {
					...mapState({
						userInfo: state => state.user.userInfo,
						isLogin: state => state.user.isLogin,
						parentId: state => state.user.parentId,
						locationCity: state => state.map.locationCity,
						roads: state => state.map.roads,
						selectCity: state => state.map.selectCity,
						initInfo: state => state.sys.initInfo,
						roads: state => state.map.roads,
						
					})
				},
		data() {
			return {
				status:1,
				oldlist:[],
				newlist:[],
				dis: '0米',
				dis2:'0米'
				
			}
		},
		methods: {
			apimyoldnewstudent(){
				this.$store
					.dispatch('apimyoldnewstudent', {
						userId: this.userInfo.userId						
					})
					.then(res => {
						console.log(res);
						this.oldlist  = res.data.myWelfareCardMap.oldStudentCardList
						// console.log(this.oldlist);
						this.newlist  = res.data.myWelfareCardMap.newStudentCardList
						// console.log(this.newlist);
						for (var i = 0; i < this.oldlist.length; i++) {
							let lat1 = this.oldlist[i].lati;
							let lng1 = this.oldlist[i].longi;
							let lat2 = this.roads.latitude;
							let lng2 = this.roads.longitude;
							this.dis = COMM.getDis(lat1, lng1, lat2, lng2);
						}
						for (var i = 0; i < this.newlist.length; i++) {
							let lat1 = this.newlist[i].lati;
							let lng1 = this.newlist[i].longi;
							let lat2 = this.roads.latitude;
							let lng2 = this.roads.longitude;
							this.dis2 = COMM.getDis(lat1, lng1, lat2, lng2);
						}
					});
			},
			oldnewxiangxiangqing(storeId,type,id){
				this.toPage({
					url: 'oldnewxiangxiangqing',
					storeId : storeId,
					type:type,
					id:id
					
				});
			},
			oldnewguize(){
				uni.navigateTo({
					url:"../oldnewguize/oldnewguize"
				})
			}
			
		},
		onLoad() {
			this.apimyoldnewstudent()
		},
		onPullDownRefresh() {
			this.apimyoldnewstudent()
			setTimeout(() => {				
				uni.stopPullDownRefresh();				
			}, 1500)
		}
	}
</script>

<style lang="less">
body{
	background-color: #f6f6f6;
	box-sizing: border-box;
	
}


.content{
	padding: 40rpx;
	margin-bottom: 100rpx;
	
	.oldlist{
		background-color: #ffffff;
		width: 100%;
		height: 350rpx;
		box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
		border-radius: 10rpx;
		padding:0 20rpx;
		margin-bottom: 20rpx;
		.oldtop{
			width: 100%;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.oldbottom{
			width: 100%;
			height: 300rpx;
			position: relative;
			.zhong{
				position: absolute;
				z-index: 2;
				display: block;
				top: 18rpx;
				left: -20rpx;
				background-color: #f08300;
				padding: 0 10rpx 0 10rpx;
				font-size: 26rpx;
				color: #ffffff;
				border-top-right-radius: 25upx;
				border-bottom-right-radius: 25upx;
			}
			.shi{
				
					position: absolute;
					z-index: 2;
					display: block;
					top: 18rpx;
					left: -20rpx;
					background-color: #919191;
					padding: 0 10rpx 0 10rpx;
					font-size: 26rpx;
					color: #ffffff;
					border-top-right-radius: 25upx;
					border-bottom-right-radius: 25upx;
				
			}
			.shixiao{
				position: absolute;
				bottom: -12rpx;
				right: -20rpx;
				image{
					width: 100rpx;
					height: 100rpx;
				}
				
			}
			.xin{
				position: absolute;
				z-index: 2;
				display: block;
				top: 18rpx;
				left: -20rpx;
				background-color:red;
				padding: 0 10rpx 0 10rpx;
				font-size: 26rpx;				
				color: #ffffff;
				border-top-right-radius: 25upx;
				border-bottom-right-radius: 25upx;
			}
			.oldbtn{
				position: absolute;
				bottom: 20rpx;
				right: 0;
				background-color: #f9ae00;
				    width: 180rpx;
				height: 65rpx;
				border-radius: 33rpx;
				text-align: center;
				line-height: 65rpx;
				font-size: 28rpx;
				color: #fff;
			}
			.contentold{
				display: flex;
				height: 100%;
				
				.imgbox{
					display: flex;
					align-items: center;
					// justify-content: center;
					width: 165rpx;
					height: 100%;
					image{
						width: 150rpx;
						height: 267rpx;
					}
				}
				.wenziold{
					font-size: 24rpx;
					color: #ccc;
					margin-left: 15rpx;
					padding-top: 20rpx;
					.title{
						font-size: 25rpx;
						color: #000000;
						width: 400rpx;												
						font-weight: 900;
						margin-bottom: 10rpx;
					}
					.nav{
						margin-bottom: 5rpx;
					}
				}
			}
			
		}
	}
}
.hexiao {	
	height: 100rpx;
	line-height: 100rpx;
	padding: 0 36rpx;
	width: 100%;
	position: fixed;
	font-size: 28rpx;
	left: 0;
	bottom: 0;
	.icon-right {
		float: right;
	}
	.lishi{
		color: red;
	}
}
.dtItem {
	background-color: #ffffff;
	box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
	// border-radius: 10upx;
	// margin-bottom: 18upx;
}
</style>
